<template>
    <div class="menu-page">
        <el-card class="search-box">
            <el-form :inline="true" :model="searchForm" class="search-form">
                <el-form-item label="上级菜单" style="width: 260px;">
                    <el-select v-model="searchForm.parentId" placeholder="请选择上级菜单" clearable>
                        <el-option label="主目录" :value="0"></el-option>
                        <el-option v-for="item in parentList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单名称" style="width: 260px;">
                    <el-input v-model="searchForm.name" placeholder="请填写菜单名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="菜单类型" style="width: 260px;">
                    <el-select v-model="searchForm.menuType" placeholder="请选择菜单类型" clearable>
                        <el-option label="目录" value="1"></el-option>
                        <el-option label="菜单" value="2"></el-option>
                        <el-option label="按钮" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否显示" style="width: 260px;">
                    <el-select v-model="searchForm.visible" placeholder="请选择是否显示" clearable>
                        <el-option label="隐藏" value="1"></el-option>
                        <el-option label="显示" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSearch" plain>查询</el-button>
                </el-form-item>

            </el-form>
        </el-card>
        <el-card class="table-box">
            <div class="table-tool" style="display: flex;margin-bottom: 15px;">
                <el-button type="primary" plain @click="handleAdd" v-permits="['sys:menu:add']">添加</el-button>
                <el-button type="success" plain @click="handleEdit" v-permits="['sys:menu:edit']">修改</el-button>
                <el-button type="danger" plain @click="handleDelete" v-permits="['sys:menu:delete']">删除</el-button>
            </div>
            <div class="table-list">
                <el-table :data="tableData"  highlight-current-row style="width: 100%" row-key="id"
                    :tree-props="{ checkStrictly: true }"  @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                    <el-table-column prop="name" label="菜单名称" align="center"></el-table-column>
                    <el-table-column prop="parentId" label="上级菜单" align="center">
                        <template #default="scope">
                            <el-tag v-if="scope.row.parentId === 0" type="danger">主目录</el-tag>
                            <el-tag v-else>{{parentList.find(e => e.id == scope.row.parentId)?.name}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="component" label="组件路径" align="center"
                        show-overflow-tooltip></el-table-column>
                    <el-table-column prop="sort" label="排序" width="60" align="center"></el-table-column>
                    <el-table-column prop="isFrame" label="是否外链" width="90" align="center">
                        <template #default="scope">
                            <el-tag v-if="scope.row.isFrame === 1" type="danger">是</el-tag>
                            <el-tag v-else>否</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="menuType" label="菜单类型" width="90" align="center">
                        <template #default="scope">
                            <el-tag v-if="scope.row.menuType === 1" type="danger">目录</el-tag>
                            <el-tag v-else-if="scope.row.menuType === 2">菜单</el-tag>
                            <el-tag v-else type="warning">按钮</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="visible" label="是否显示" width="90" align="center">
                        <template #default="scope">
                            <el-tag v-if="scope.row.visible === 1" type="danger">隐藏</el-tag>
                            <el-tag v-else>显示</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="perms" label="权限标识" align="center"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="160" align="center"></el-table-column>
                    <el-table-column prop="updateTime" label="修改时间" width="160" align="center"></el-table-column>
                    <el-table-column prop="operate" label="操作" align="center" width="220">
                        <template #default="scope">
                            <el-button type="primary" plain size="small"  v-permits="['sys:menu:add']"
                                @click="() => handleAdd(scope.row.id)">添加</el-button>
                            <el-button type="primary" plain size="small"  v-permits="['sys:menu:edit']"
                                @click="() => handleEdit(scope.row.id)">修改</el-button>
                            <el-button type="danger" plain size="small"  v-permits="['sys:menu:delete']"
                                @click="() => handleDelete(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
        <UnifiedForm ref="UnifiedFormRef" v-model:dialogFrom="dialogFrom" @onParentSearch="onSearch"></UnifiedForm>
    </div>
</template>
<script lang="ts" setup>
// ---------------------------------------------------导入相关引用---------------------------------------------------

import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import UnifiedForm, { type DialogFrom } from '@/views/system/SysMenu/components/UnifiedForm.vue';
import type { SearchListParams, TableData } from '@/api/system/SysMenu';
import { getList, getTreeList, deleteInfo } from '@/api/system/SysMenu';

// ---------------------------------------------------相关参数定义---------------------------------------------------
const searchForm = reactive<SearchListParams>({
    pageNum: 1,
    pageSize: 10,
    parentId: 0,
    name: '',
    code: '',
    menuType: null,
    visible: null,
})

const tableData = ref<TableData[]>([])
const parentList = ref<TableData[]>([])

const selectionTableData = ref<number[]>([])
const dialogFrom = ref<DialogFrom>({
    dialogTitle: '添加数据',
    dialogVisible: false,
    infoId: null,
    parentId: 0
})
// ---------------------------------------------------事件定义---------------------------------------------------
/**
 * 页面加载时回调
 */
onMounted(() => {
    onSearch();

})
// ---------------------------------------------------操作方法定义---------------------------------------------------

/**
 * 查询
 */
const onSearch = () => {
    getTreeList(searchForm).then((res) => {
        tableData.value = res.data.data;
    });
    // getPage(searchForm).then((res) => {
    //     if (res.data.code === 200) {
    //         tableData.value = res.data.data.records;
    //         pageCount.value = res.data.data.pages;
    //         total.value = res.data.data.total;
    //     }
    // });
    getListApi();
}

/**
 * 获取列表信息
 */
const getListApi = async () => {
    await getList({}).then((res) => {
        if (res.data.code === 200) {
            parentList.value = res.data.data;
        }
    })
}

/**
 * 添加
 */
const handleAdd = (rowId: number) => {
    dialogFrom.value.dialogTitle = '添加数据';
    dialogFrom.value.dialogVisible = true;
    dialogFrom.value.infoId = null;
    dialogFrom.value.parentId = rowId || 0;
}

/**
 * 修改
 * @param rowId id
 */
const handleEdit = (rowId: number) => {
    if (typeof rowId !== 'number') {
        if (selectionTableData.value.length == 0) {
            ElMessage.warning('请选择一条数据');
            return;
        } else if (selectionTableData.value.length > 1) {
            ElMessage.warning('只能选择一条数据');
            return;
        }
        rowId = selectionTableData.value[0];
    }
    dialogFrom.value.dialogTitle = '修改数据';
    dialogFrom.value.dialogVisible = true;
    dialogFrom.value.infoId = rowId;
}

/**
 * 删除
 * @param rowId id
 */
const handleDelete = (rowId: number | number[]) => {
    if (typeof rowId !== 'number') {
        if (selectionTableData.value.length == 0) {
            ElMessage.warning('请选择一条数据');
            return;
        }
        rowId = selectionTableData.value;
    }
    deleteApi(rowId)
}

/**
 * 删除接口调用
 * @param id id
 */
const deleteApi = (rowId: number | number[]) => {
    ElMessageBox.confirm('确定要删除选中的数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        deleteInfo(rowId).then((res) => {
            if (res.data.code === 200) {
                ElMessage.success('删除成功');
                onSearch();
            }
        })
    }).catch(() => { })
}

/**
 * 多选
 * @param val 选中的数据
 */
const handleSelectionChange = (val: TableData[]) => {
    selectionTableData.value = val.map((item) => {
        return item.id;
    });
}
</script>

<style lang="scss" scoped>
.menu-page {
    width: 100%;
    height: 100%;
}
</style>